<template>
  <div class="plist">
    <div class="list">
     <div v-if="plist" class="item" @longpress="delC(item.id)" @tap="onDetail(item.id)" hover-class="hoverc"  v-for="(item,index) in plist" :key="index">
            <div class="fleft">
                <img :src="item.image" alt="">
            </div>
            <div class="fright">
                <div class="top">{{item.title}}</div>
                <div class="bottom">
                    <span class="price" v-show="item.price">￥{{item.price}}</span>
                    <span class="read">{{item.read_count}}人浏览</span>
                    <span class="comment">{{item.comment_count}}人评论</span>
                </div>
            </div>
      </div>
    </div>
    <div v-show="!more" class="more">暂无数据！</div>
   </div>
</template>
<script>
import { mapState } from "vuex";
import config from "@/utils/config";
export default {
  props: {
    plist: Array,
    myColl: Boolean
  },
  computed: {
    ...mapState(["more"])
  },
  methods: {
    delC(id) {
      if(!this.myColl) {
        return;
      }
      let that = this;
      wx.showModal({
        title: "删除操作",
        content: "是否删除这个收藏!",
        success: function(res) {
          if (res.confirm) {
            let collections = wx.getStorageSync("collections");
            let pid = [];
            for (let j = 0; j < collections.length; j++) {
              pid.push(collections[j].products_id);
            }
            let key = pid.indexOf(id);
            collections.splice(key, 1);
            let list = [];
            wx.setStorageSync("collections", collections);
            for (let i = 0; i < collections.length; i++) {
              collections[i].productsDetail.image =
                config.imageUrl + collections[i].productsDetail.image;
              list.push(collections[i].productsDetail);
            }
            that.plist = list;
          } else if (res.cancel) {
          }
        }
      });
    },
    onDetail(id) {
      wx.navigateTo({
        url: "/pages/detail/main?id=" + id
      });
    }
  },
  async created() {}
};
</script>
<style lang="scss" scoped>
@import "../styles/varibles.scss";
.plist {
  .more {
    text-align: center;
    font-size: $fontSize3;
    padding: 20rpx 0;
    color: #444;
  }
  .list {
    .hoverc {
      background: $hoverBg2;
    }
    .item {
      display: flex;
      padding: 10rpx 20rpx;
      border-bottom: 1rpx solid $borderColor;
      .fleft {
        width: 200rpx;
        margin-right: 20rpx;
        img {
          width: 200rpx;
          height: 140rpx;
          border-radius: 10rpx;
        }
      }
      .fright {
        flex: 1;
        .top {
          font-size: $fontSize3;
          margin-bottom: 10rpx;
        }
        .bottom {
          font-size: $fontSize0;
          color: $grayColor;
          span {
            margin: 0 10rpx;
          }
        }
      }
    }
  }
}
</style>


